<template>
  <v-card>
    <vcu-table
      :columns="tableColumn"
      :data="tableData"
      :spanLineMethod="spanLineMethod"
    >
    </vcu-table>
  </v-card>
</template>
<script>
import XEUtils from "xe-utils";
export default {
  computed: {},
  data() {
    return {
      tableColumn: [
        { type: "seq", width: 50 },
        { field: "name", title: "Name" },
        { field: "sex", title: "Sex", showHeaderOverflow: true },
        { field: "address", title: "Address", showOverflow: true },
      ],
      tableData: [
        {
          id: 10001,
          name: "Test1",
          role: "Develop",
          sex: "Man",
          sex2: "Man",
          age: 28,
          address: "好好学习天天向上",
        },
        {
          id: 10002,
          name: "Test2",
          role: "Test",
          sex: "Women",
          age: 22,
          address: "Guangzhou",
        },
        {
          id: 10003,
          name: "Test3",
          role: "PM",
          sex: "Man",
          sex2: "Man",
          age: 32,
          address: "Shanghai",
        },
        {
          id: 10004,
          name: "Test4",
          role: "Designer",
          sex: "Women",
          sex2: "Man",
          age: 23,
          address: "好好学习天天向上",
        },
        {
          id: 10005,
          name: "Test5",
          role: "Develop",
          sex: "Women",
          sex2: "Man",
          age: 30,
          address: "Shanghai",
        },
        {
          id: 10006,
          name: "Test6",
          role: "Designer",
          sex: "Women",
          sex2: "Man",
          age: 21,
          address: "好好学习天天向上",
        },
        {
          id: 10007,
          name: "Test7",
          role: "Test",
          sex: "Man",
          sex2: "Man",
          age: 29,
          address: "好好学习天天向上",
        },
        {
          id: 10008,
          name: "Test8",
          role: "Develop",
          sex: "Man",
          sex2: "Man",
          age: 35,
          address: "好好学习天天向上",
        },
      ],
    };
  },
  mounted() {},
  methods: {
    spanLineMethod({ column, _rowIndex }) {
      if (column.property == "sex") {
        if (XEUtils.includes([0, 6], _rowIndex)) {
          return 1;
        }
        if (XEUtils.includes([1, 2, 3], _rowIndex)) {
          return 2;
        }
        if (XEUtils.includes([4, 7], _rowIndex)) {
          return 3;
        }
        return 0;
      }
      return false;
    },
  },
};
</script>
